<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模型列表 - AI Bot</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#6b7280',
                        success: '#10b981',
                        danger: '#ef4444',
                        background: '#f9fafb',
                        card: '#ffffff',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-all;
            }
            .btn-secondary {
                @apply bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-md transition-all;
            }
            .skeleton {
                @apply animate-pulse bg-gray-200 rounded;
            }
        }
    </style>
</head>
<body class="bg-background min-h-screen font-inter text-gray-800">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <i class="fa fa-cubes text-primary text-2xl mr-2"></i>
                    <span class="text-xl font-semibold">AI模型管理</span>
                </div>
                <div class="flex items-center">
                    <button id="refresh-btn" class="btn-primary flex items-center">
                        <i class="fa fa-refresh mr-2"></i>
                        <span>刷新模型</span>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <!-- 状态提示 -->
        <div id="status-message" class="mb-6 p-4 rounded-md bg-gray-50 border border-gray-200 hidden">
            <div class="flex items-center">
                <i id="status-icon" class="fa fa-info-circle mr-3"></i>
                <span id="status-text">加载中...</span>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="mb-8 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500">总模型数</p>
                        <h3 id="total-models" class="text-3xl font-bold">--</h3>
                    </div>
                    <div class="bg-blue-100 p-3 rounded-full">
                        <i class="fa fa-database text-primary text-xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500">上次更新</p>
                        <h3 id="last-updated" class="text-2xl font-bold">--</h3>
                    </div>
                    <div class="bg-green-100 p-3 rounded-full">
                        <i class="fa fa-clock-o text-success text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模型列表标题 -->
        <div class="mb-6 flex justify-between items-center">
            <h2 class="text-2xl font-bold">可用模型列表</h2>
            <span id="models-count" class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-full">-- 个模型</span>
        </div>

        <!-- 模型列表容器 -->
        <div id="models-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 加载骨架屏 -->
            <div class="skeleton h-40 rounded-lg"></div>
            <div class="skeleton h-40 rounded-lg"></div>
            <div class="skeleton h-40 rounded-lg"></div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
            <p class="text-center text-gray-500 text-sm">AI模型管理系统 &copy; 2024</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 获取DOM元素
        const modelsContainer = document.getElementById('models-container');
        const refreshBtn = document.getElementById('refresh-btn');
        const statusMessage = document.getElementById('status-message');
        const statusText = document.getElementById('status-text');
        const statusIcon = document.getElementById('status-icon');
        const totalModelsEl = document.getElementById('total-models');
        const lastUpdatedEl = document.getElementById('last-updated');
        const modelsCountEl = document.getElementById('models-count');

        // 显示状态消息
        function showStatus(message, isError = false) {
            statusMessage.classList.remove('hidden', 'bg-green-50', 'bg-red-50', 'border-green-200', 'border-red-200');
            statusIcon.classList.remove('fa-check-circle', 'fa-exclamation-circle', 'text-success', 'text-danger');
            
            if (isError) {
                statusMessage.classList.add('bg-red-50', 'border-red-200');
                statusIcon.classList.add('fa-exclamation-circle', 'text-danger');
            } else {
                statusMessage.classList.add('bg-green-50', 'border-green-200');
                statusIcon.classList.add('fa-check-circle', 'text-success');
            }
            
            statusText.textContent = message;
            
            // 5秒后自动隐藏
            setTimeout(() => {
                statusMessage.classList.add('hidden');
            }, 5000);
        }

        // 格式化日期时间
        function formatDateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }

        // 加载模型列表
        async function loadModels() {
            // 显示加载状态
            modelsContainer.innerHTML = `
                <div class="skeleton h-40 rounded-lg"></div>
                <div class="skeleton h-40 rounded-lg"></div>
                <div class="skeleton h-40 rounded-lg"></div>
            `;
            
            try {
                // 调用API获取模型列表
                const response = await fetch('http://127.0.0.1:9201/scan_models');
                
                if (!response.ok) {
                    throw new Error(`API请求失败: ${response.status}`);
                }
                
                const data = await response.json();
                const models = Array.isArray(data) ? data : (data.values || []);
                
                // 更新统计信息
                totalModelsEl.textContent = models.length;
                lastUpdatedEl.textContent = formatDateTime();
                modelsCountEl.textContent = `${models.length} 个模型`;
                
                // 渲染模型列表
                if (models.length === 0) {
                    modelsContainer.innerHTML = `
                        <div class="col-span-full text-center py-12">
                            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                                <i class="fa fa-folder-open-o text-gray-400 text-2xl"></i>
                            </div>
                            <h3 class="text-lg font-medium text-gray-900 mb-1">暂无模型</h3>
                            <p class="text-gray-500">当前目录下没有可用的模型文件</p>
                        </div>
                    `;
                } else {
                    modelsContainer.innerHTML = models.map(model => `
                        <div class="bg-white rounded-lg shadow card-hover p-5">
                            <div class="flex items-center mb-4">
                                <div class="bg-blue-100 p-2 rounded-md mr-3">
                                    <i class="fa fa-file-code-o text-primary"></i>
                                </div>
                                <h3 class="font-semibold text-lg truncate w-full">${model}</h3>
                            </div>
                            <div class="flex space-x-2 mt-auto">
                                <button class="view-model-btn btn-secondary flex-1 text-sm flex items-center justify-center">
                                    <i class="fa fa-eye mr-1"></i> 查看
                                </button>
                                <button class="use-model-btn btn-primary flex-1 text-sm flex items-center justify-center">
                                    <i class="fa fa-play mr-1"></i> 使用
                                </button>
                            </div>
                        </div>
                    `).join('');
                    
                    // 添加事件监听器
                    attachEventListeners();
                }
                
                showStatus('模型列表加载成功');
                
            } catch (error) {
                console.error('加载模型失败:', error);
                modelsContainer.innerHTML = `
                    <div class="col-span-full text-center py-12">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-4">
                            <i class="fa fa-exclamation-triangle text-danger text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-1">加载失败</h3>
                        <p class="text-gray-500">无法连接到模型服务，请检查服务状态</p>
                    </div>
                `;
                showStatus(`加载失败: ${error.message}`, true);
            } finally {
                // 移除刷新按钮的加载状态
                refreshBtn.classList.remove('opacity-50', 'pointer-events-none');
                refreshBtn.querySelector('i').classList.remove('fa-spin');
            }
        }

        // 添加事件监听器
        function attachEventListeners() {
            // 查看模型按钮
            document.querySelectorAll('.view-model-btn').forEach((btn, index) => {
                btn.addEventListener('click', () => {
                    const modelName = btn.closest('.card-hover').querySelector('h3').textContent;
                    showStatus(`查看模型: ${modelName}`);
                    console.log('查看模型详情:', modelName);
                    // 这里可以添加查看模型详情的逻辑
                });
            });
            
            // 使用模型按钮
            document.querySelectorAll('.use-model-btn').forEach((btn, index) => {
                btn.addEventListener('click', () => {
                    const modelName = btn.closest('.card-hover').querySelector('h3').textContent;
                    showStatus(`正在加载模型: ${modelName}`);
                    console.log('使用模型:', modelName);
                    // 这里可以添加使用模型的逻辑
                });
            });
        }

        // 刷新按钮事件
        refreshBtn.addEventListener('click', () => {
            // 设置加载状态
            refreshBtn.classList.add('opacity-50', 'pointer-events-none');
            refreshBtn.querySelector('i').classList.add('fa-spin');
            
            // 重新加载模型
            loadModels();
        });

        // 页面加载时获取模型列表
        document.addEventListener('DOMContentLoaded', () => {
            loadModels();
        });
    </script>
</body>
</html>